<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 把所有的a标签默认效果去掉 */
        a {
            color: white;
            text-decoration: none;
        }

        /* 把列表多余的东西去掉 */
        ol,
        ul {
            list-style-type: none;
            color: white;
        }

        .left {
            float: left;
        }

        .right {
            float: right;
        }

        #header {
            background-color: #23262e;
            height: 50px;

            label {
                color: white;
                line-height: 50px;
                margin: 0 2%;
            }

            span {
                margin-left: 5%;
                color: white;
                font-size: 12px;
            }

            a {
                line-height: 50px;
                margin-right: 20px;
            }
        }

        #spinner {
            width: 15%;
            height: 700px;
            overflow: hidden;
            background-color: #393d49;

            #hd_logo {
                margin-top: 25px;
            }

            p {
                text-align: center;
                color: white;
                font-size: 13px;
            }

            ul {
                padding-left: 0;

                img {
                    margin-right: 3%;
                }

                li {
                    .tri {
                        margin-top: 9px;
                        float: right
                    }

                    padding: 10px 20px;

                    &:hover {
                        background-color: #2b2e37;
                    }

                    ul {
                        margin-top: 15px;
                    }

                    li {
                        &:hover {
                            background-color: #009688;
                        }
                    }
                }
            }
        }
    </style>
</head>

<body>
    <!-- 头部部分 -->
    <div id="header">
        <label>旅游信息管理系统</label>
        <span>新疆 <img src="imgs/cloud.png" alt="" title=""> 22℃ </span>
        <div class="right">
            <a href="#">系统公告</a>
            
            <a href="javascript:void(0)" onclick="exit_manage_system()">退出</a>
            <a href="#">锁屏</a>
            <a href="#">超级管理员</a>
        </div>
    </div>
    <!-- 左边的下拉框 -->
    <div id="spinner" class="left">
        <p><img id="hd_logo" src="imgs/head_logo.png" alt="" title=""></p>
        <p>你好！超级管理员，欢迎登录</p>
        <ul>
            <li><img src="imgs/star.png"><a href="m_home_page.html">后台首页</a>
                <img class="tri" src="imgs/down_triangle.png">
            </li>
            <li id="li2"><img src="imgs/star.png"><a href="#" onclick="showInner(2)">用户管理</a><img class="tri"
                    src="imgs/down_triangle.png">
                <ul>
                    <li><img src="imgs/person.png"><a href="m_user_manage.html">注册用户</a></li>
                    <li><img src="imgs/person.png"><a href="#">系统用户</a></li>
                </ul>
            </li>
            <li id="li3"><img src="imgs/star.png"><a href="#" onclick="showInner(3)">内容管理</a><img class="tri"
                    src="imgs/down_triangle.png">
                <ul>
                    <li><img src="imgs/setting_logo.png">
                        <a href="m_add_tourist_routes.html">旅游路线</a>
                    </li>
                    <li><img src="imgs/setting_logo.png">
                        <a href="m_attraction_manage.html">景点管理</a>
                    </li>
                    <li><img src="imgs/setting_logo.png">
                        <a href="#">酒店管理</a>
                    </li>
                    <li><img src="imgs/setting_logo.png">
                        <a href="#">留言管理</a>
                    </li>
                    <li><img src="imgs/setting_logo.png">
                        <a href="#">攻略管理</a>
                    </li>
                    <li><img src="imgs/setting_logo.png">
                        <a href="#">车票管理</a>
                    </li>
                    <li><img src="imgs/setting_logo.png">
                        <a href="#">保险管理</a>
                    </li>
                </ul>
            </li>
            <li><img src="imgs/star.png"><a href="#">业务管理</a>
                <img class="tri" src="imgs/down_triangle.png">
            </li>
            <li><img src="imgs/star.png"><a href="#">数据分析</a>
                <img class="tri" src="imgs/down_triangle.png">
            </li>
        </ul>
    </div>
    <script>
        for (var i = 2; i <= 3; i++) {
            var lix = document.getElementById("li" + i)
            var m = lix.querySelector("ul");
            m.hidden = true;
        }
        //显示首页
        // console.log()
        // $("#homepage").attr("hidden", false);
        // $("#homepage").siblings().attr("hidden", true);


        function showInner(x) {
            var lix = document.getElementById('li' + x);
            //修改该li标签下的ul标签显示或隐藏
            var m = lix.querySelector("ul");
            var im = lix.querySelector(".tri");
            if (m.hidden === true) {
                m.hidden = false;
                im.src = "imgs/up_triangle.png";
            } else {
                m.hidden = true;
                im.src = "imgs/down_triangle.png";
            }
        }

        function exit_manage_system() {
            console.log("退出");
            $.ajax({
                url: "AdminServlet",
                type: "get",
                data: "methodName=logout",
                success: function (result) {
                    alert(result);
                },
                error: function () {
                    alert("出现错误");
                }
            });
        }
    </script>
</body>

</html>